<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="view">
    <button @click="getData()">获取数据</button>
    <table v-if="arr">
        <tr>
            <td>id</td>
            <td>name</td>
            <td>price</td>
            <td>操作</td>
        </tr>
        <tr v-for="item in arr">
            <td>{{item.id}}</td>
            <td>{{item.goodsName}}</td>
            <td>{{item.goodsPrice}}</td>
            <td>
                <button @click="deleteById(item.id)">删除</button>
            </td>
        </tr>
    </table>
</div>
<script src="./js/vue.js"></script>
<script src="./axios.js"></script>
<script>
    const vm = Vue.createApp({
        data() {
            return {
                arr: undefined
            }
        },
        methods: {
            getData() {
                axios.get("http://localhost:8080/list").then(res => {
                    console.log(res.data)
                    let resp = res.data
                    if (resp.code === 1) {
                        this.arr = resp.data
                    }
                })
            },
            deleteById(id) {
                console.log(id)
                // 删除请求
                axios.get("http://localhost:8080/delete?id=" + id).then(res => {
                    console.log(res.data)
                    let resp = res.data
                    if (resp.code === 1) {
                        alert("删除" + id + "成功！")
                        this.getData()
                    }
                })
            }
        }
    }).mount("#view")
</script>
</body>
</html>